<template>
<div id="ResetPass" class="page-blank">
  <van-nav-bar title="修改密码" left-arrow @click-left="goBack()"/>
  <van-cell-group>    
    <van-field required type="password" label="原密码" placeholder="请输入原密码" v-model="oldPassword"/>
    <van-field required type="password" label="新密码" placeholder="请输入新密码" v-model="newPassword"/>
    <van-field required type="password" label="确认新密码" placeholder="请输入新密码" v-model="confirmNewPassword"/>
  </van-cell-group>
  <van-button round type="info" size="small" :loading="submitLoading" @click="submit">提交</van-button>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class ResetPass extends Vue {

  oldPassword: any = ''
  newPassword: any = ''
  confirmNewPassword: any = ''

  submitLoading: any = false

  submit() {  
    if( this.submitLoading ) return ;
    if(this.oldPassword === '') return this.$toast('请输入原密码');
    if(this.newPassword === '') return this.$toast('请输入新密码');
    if(this.confirmNewPassword === '') return this.$toast('请确认新密码');
    if(this.confirmNewPassword !== this.newPassword) return this.$toast('两次新密码输入不一致！');
    this.submitLoading = true;
    axios.put('/api/login/password', { 
      query: { oldPassword: this.oldPassword, newPassword: this.newPassword, username: this.$store.state.userInfo.userName }
    }).then((res: any) => { 
      this.submitLoading = false;
      this.$router.push('Login');
      this.$toast('修改成功');
    }).catch((err: any) => {
      this.submitLoading = false;
    });
  }

  goBack() {
    this.$router.go(-1);
  }
  
};
</script>
